<body style="min-width:500px;">
    <? $this->load->helper('url'); //var_dump($activeMenuTab);die();?>
    <script src="<?php echo base_url('assets/js/chart.js'); ?>"></script>
    <div id="wrap">
        <div class="container">
            <div class="navbar-default navbar-fixed-top">
                <div class="container">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-header">
                        <strong><a href="<? echo base_url(); ?>" class="navbar-brand"> <span class="glyphicon glyphicon-book"></span>  READING LABORATORY</a></strong>
                    </div>
                    <div class="collapse navbar-collapse">
                        <div style="float:right;"><p class="navbar-text">Signed in as <a onClick="$('#tab1').removeClass('active');$('#tab2').removeClass('active');$('#tab3').removeClass('active');var element = document.getElementById('tab4');element.classList.add('active');" href="#profile" data-toggle="tab" style="color: white"><strong><? echo $profile['firstname'] . ' ' . $profile['lastname'] ?></strong></a> &nbsp; <a href="<? echo base_url('logout') ?>" class="btn btn-xs btn-danger">Logout</a></p></div>
                    </div>
                </div>
            </div>

            <div  style="padding:70px 0px 0px 0px;">
                <div class='col-md-3'>
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <ul class="nav nav-pills nav-stacked" id="myTab">
                                <li class="<? if (!isset($activeMenu)) echo 'active' ?> text-center" id='tab1'><a href="#statistics" data-toggle="tab">Dashboard</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'myStudents') echo 'active';} ?> text-center" id='tab2'><a href="#students" data-toggle="tab">My Students</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'mySections')echo 'active' ;} ?> text-center" id='tab3'><a href="#sections" data-toggle="tab">My Sections</a></li>
                                <li class="<? if (isset($activeMenu)) {if ($activeMenu == 'myProfile') echo 'active';} ?> text-center" id='tab4'><a href="#profile" data-toggle="tab">My Profile</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class='col-md-9'>
                    <div id="menuContent" class="tab-content">
                        <div class="tab-pane fade <? if (!isset($activeMenu)) echo 'active' ?> in" id="statistics">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Dashboard > <span id="tabName">Section Progress Report</span></div>
                                <div class="panel-body">
                                    <ul class="nav nav-tabs" id="myTablia">
                                        <li class="active text-center"><a href="#progressTab" data-toggle="tab" onclick='$("#tabName").text("Section Progress Report");'>Section Progress Report</a></li>
                                        <li class="text-center"><a href="#studentReportTab" data-toggle="tab" onclick='$("#tabName").text("Student Progress Report");'>Student Progress Report</a></li>
                                    </ul>
                                    
                                    <div id="itemContent" class="tab-content">
                                        <div class="tab-pane fade active in" id="progressTab"  style="padding-top:2%">
                                            <? if(!empty($pie)){?>
                                            <div class="form-group" >
                                                <div class="col-md-6" style="max-width: 292px">
                                                    <select class="form-control" id="section" onchange="showitem(this.options[this.options.selectedIndex].value)">
                                                        <? foreach ($pie as $section) { ?>
                                                            <option value="<? echo $section['section_id']; ?>"><? echo $section['section_name'] ?></option>
                                                <? } ?>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-12" style="padding-top: 5%">
                                                <?
                                                $first = true;
                                                foreach ($pie as $chart) {
                                                    if ($first) {?>
                                                      <div class="row" id="<?echo 'chart_'.$chart['section_id']?>">
                                                      <?  $first = false;
                                                    } else {?>
                                                       <div class="row" id="<?echo 'chart_'.$chart['section_id']?>" style="display:none">
                                                  <?  }
                                                    ?>
                                                    <div class="col-md-6 text-center" style="max-width: 380px">
                                                        <canvas id="canvas_<? echo $chart['section_id'] ?>" height="450" width="450"></canvas>  
                                                        <script>

                                                var pieData = [
                                                    {
                                                        value: <? echo isset($chart['level_1']) ? $chart['level_1'] : 0; ?>,
                                                        label : <? echo isset($chart['level_1']) ? $chart['level_1'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#ff0000"
                                                    }, 
                                                            {
                                                        value: <? echo isset($chart['level_0']) ? $chart['level_0'] : 0; ?>,
                                                        label : <? echo isset($chart['level_0']) ? $chart['level_0'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "gray"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_2']) ? $chart['level_2'] : 0; ?>,
                                                                label : <? echo isset($chart['level_2']) ? $chart['level_2'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#ffa500"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_3']) ? $chart['level_3'] : 0; ?>,
                                                                label : <? echo isset($chart['level_3']) ? $chart['level_3'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#ffd700"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_4']) ? $chart['level_4'] : 0; ?>,
                                                                label : <? echo isset($chart['level_4']) ? $chart['level_4'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#a52a2a"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_5']) ? $chart['level_5'] : 0; ?>,
                                                                label : <? echo isset($chart['level_5']) ? $chart['level_5'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#d2b48c"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_6']) ? $chart['level_6'] : 0; ?>,
                                                                label : <? echo isset($chart['level_6']) ? $chart['level_6'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#00ff00"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_7']) ? $chart['level_7'] : 0; ?>,
                                                                label : <? echo isset($chart['level_7']) ? $chart['level_7'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#008000"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_8']) ? $chart['level_8'] : 0; ?>,
                                                                label : <? echo isset($chart['level_8']) ? $chart['level_8'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#808000"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_9']) ? $chart['level_9'] : 0; ?>,
                                                                label : <? echo isset($chart['level_9']) ? $chart['level_9'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#00ffff"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_10']) ? $chart['level_10'] : 0; ?>,
                                                                label : <? echo isset($chart['level_10']) ? $chart['level_10'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#0000ff"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_11']) ? $chart['level_11'] : 0; ?>,
                                                                label : <? echo isset($chart['level_11']) ? $chart['level_11'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#800080"
                                                    },
                                                    {
                                                        value: <? echo isset($chart['level_12']) ? $chart['level_12'] : 0; ?>,
                                                                label : <? echo isset($chart['level_12']) ? $chart['level_12'] : 0; ?>,
                                                        labelColor : '#ffffff',
                                                        labelFontSize : '40',
                                                        color: "#ee82ee"
                                                    }

                                                ];

                                                var myPie = new Chart(document.getElementById("canvas_<? echo $chart['section_id'] ?>").getContext("2d")).Pie(pieData);

                                                        </script>			
                                                    </div> 
                                                    <div class="col-md-6">
                                                        <div class="panel panel-default">
                                                            <div class="panel-body">
                                                                <table class="table table-striped table-condensed" style="margin-bottom: 0px;">
                                                                    <thead>
                                                                        <tr>
                                                                            <th class="text-center" width=40%>Color</th>
                                                                            <th class="text-center" width=60%># Of Students on the level</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                        
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:gray"><b>No Level</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_0']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_0').'">'.$chart['level_0'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#ff0000"><b>Level 1</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_1']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_1').'">'.$chart['level_1'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#ffa500"><b>Level 2</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_2']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_2').'">'.$chart['level_2'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#ffd700"><b>Level 3</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_3']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_3').'">'.$chart['level_3'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#a52a2a"><b>Level 4</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_4']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_4').'">'.$chart['level_4'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#d2b48c"><b>Level 5</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_5']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_5').'">'.$chart['level_5'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#00ff00"><b>Level 6</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_6']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_6').'">'.$chart['level_6'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#008000"><b>Level 7</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_7']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_7').'">'.$chart['level_7'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#808000"><b>Level 8</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_8']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_8').'">'.$chart['level_8'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#00ffff"><b>Level 9</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_9']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_9').'">'.$chart['level_9'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#0000ff"><b>Level 10</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_10']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_10').'">'.$chart['level_10'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#800080"><b>Level 11</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_11']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_11').'">'.$chart['level_11'].'</a>' : 0; ?></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-center" style="background-color:#ee82ee"><b>Level 12</b></td>
                                                                            <td class="text-center"><? echo isset($chart['level_12']) ? '<a href="#" data-toggle="modal" data-target="#'.str_replace(array(' ','.', ','),'',$chart['section_name'].'_level_12').'">'.$chart['level_12'].'</a>' : 0; ?></td>
                                                                        </tr>

                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                             </div>
                                                        </div>
                                                    </div> 
                                            <? }?>      
                                                </div>

                                        <?}else{?><h3 class="text-center text-danger">NO PROGRESS REPORT TO DISPLAY.</h3><?}?>
                                    </div>


                                    <div class="tab-pane fade in" id="studentReportTab" style="padding-top:2%;">
                                        <? if (!empty($myStudents)) { ?>
                                        <div class="col-md-12">
                                            <div class="form-inline pull-right" style="margin-bottom:2%">
                                                <div class="form-group">
                                                    <input type="search" class="form-control input-sm light-table-filter" data-table="stdnReport" placeholder="Search..">
                                                </div>
                                            </div>
                                        </div>


                                        <div class="table-responsive">
                                            <table id="StudentReport" class="stdnReport table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" width=30%>Student Name</th>
                                                        <th class="text-center" width=30%>Section</th>
                                                        <th class="text-center" width=15%>Level</th>
                                                        <th class="text-center" width=15%></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                            <? foreach ($myStudents as $student) { ?>
                                                        <tr>
                                                            <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                            <td class="text-center"><? echo $student['section_name'] ?></td>
                                                            <td class="text-center" style="background-color:<? echo $student['colorhex'] ?>"><? if (empty($student['colorhex']))echo '0'; ?></td>
                                                            <td class="text-center"><button data-toggle="modal" data-target='#studentProgress_<? echo $student['user_id'] ?>'  href="<? echo base_url('/student/studentReport/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-success" style="text-decoration: none">View Progress</button></td>
                                                        </tr>
                                                <? } ?>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <div id="StudentReportPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select>
                                                </div>
                                            </form>
                                        </div>
                                        <?}else{?> <h3 class="text-center text-danger">NO STUDENT REPORTS TO DISPLAY.</h3><?}?>
                                    </div>
                        </div>
                                </div>
                            </div>
</div>

<div class="tab-pane <? if (isset($activeMenu)) {
    if ($activeMenu == 'myStudents') echo 'active';
} ?> fade in" id="students">
                        <div class="panel panel-primary">
                            <div class="panel-heading">My Students > <span id="tabNameStudents">Active Students</span></div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs" id="myTablia">
                                    <li class="<? if(isset($activeMenuTab)){if($activeMenuTab != 'inactiveStudents')echo 'active';}else echo 'active'?> text-center"><a href="#activeStudents" data-toggle="tab" onclick='$("#tabNameStudents").text("Active Students");'>Active Students <span class="badge"><? echo count($myStudents)?></span></a></li>
                                    <li class="<?if(isset($activeMenuTab))if ($activeMenuTab=='inactiveStudents')echo 'active';?> text-center"><a href="#inactiveStudents" data-toggle="tab" onclick='$("#tabNameStudents").text("Inactive Students");'>Inactive Students <span class="badge"><? echo count($inactive)?></span></a></li>
                                </ul>
                                <div id="itemContent" class="tab-content">
                                    <div class="tab-pane fade <? if(isset($activeMenuTab)){if($activeMenuTab != 'inactiveStudents')echo 'active';}else echo 'active'?> in" id="activeStudents"  style="padding-top:2%">
                                        <? if (!empty($myStudents)) { ?>
                                        <div class="col-md-12">
                                            <a href="<?echo base_url('/moderator/addStudent');?>"  class="btn btn-sm btn-default" style="text-decoration: none">Add Student</a>
                                            <div class="form-inline pull-right" style="margin-bottom:2%">
                                                <div class="form-group">
                                                    <input type="search" class="form-control input-sm light-table-filter" data-table="actStudent" placeholder="Search..">
                                                </div>
                                            </div>

                                        </div>
                                        <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
                                        <div class="table-responsive">
                                            <table id="ActiveStudents" class="actStudent table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" width=20%>User Name</th>
                                                        <th class="text-center" width=30%>Student Name</th>
                                                        <th class="text-center" width=10%>Section</th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=10%></th>
                                                        <th class="text-center" width=15%></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
<? foreach ($myStudents as $student) { ?>
                                                        <tr>
                                                            <td class="text-center"><? echo $student['username'] ?></td>
                                                            <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                            <td class="text-center"><? echo $student['section_name'] ?></td>
                                                            <td class="text-center"><a href="<? echo base_url('/moderator/editStudent/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Edit</a></td>
                                                            <td class="text-center"><button href="#" onclick="deleteConfirm(<? echo $student['user_id'] ?>);"  class="btn btn-sm btn-danger" style="text-decoration: none">Deactivate</button></td>
                                                            <td class="text-center"><button href="#" onclick="resetPassword(<? echo $student['user_id'] ?>);"  class="btn btn-sm btn-primary" style="text-decoration: none">Reset Password</button></td>
                                                        </tr>
<? } ?>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div id="ActiveStudentsPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select></div>
                                            </form>
                                        </div>
                                        <? }
else{?> <div class="col-md-12">
                                            <div class="pull-right tiptext" <?if (empty($activeSections)) echo 'data-toggle="tooltip" data-placement="top" title="" data-original-title="You cant add students if you dont have an activated section."';?> style="margin-bottom: 1%"><a href="<?echo base_url('/moderator/addStudent');?>"  class="tiptext btn btn-sm  btn-default <?if (empty($activeSections)) echo 'disabled'?>"  style="text-decoration: none;">Add Student</a></div>
         

                                        </div>
                                         <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
<h3 class="text-center text-danger">NO ACTIVE STUDENTS AVAILABLE TO VIEW.</h3><?}?>
                                    </div>	

                                    <div class="tab-pane <?if(isset($activeMenuTab)){if ($activeMenuTab=='inactiveStudents'){echo 'active';};}?> fade in" id="inactiveStudents"  style="padding-top:2%">
<? if (!empty($inactive)) { ?>
                                         <div class="col-md-12">
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="inactStudent" placeholder="Search..">
                                                    </div>
                                                </div>
                                            </div>
                                        <? if (isset($activeMenuTab)) if ($activeMenuTab == 'inactiveStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>

                                            <div class="table-responsive">
                                                <table id="inActiveStudents" class="inactStudent table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=30%>User Name</th>
                                                            <th class="text-center" width=30%>Student Name</th>
                                                            <th class="text-center" width=20%>Section</th>
                                                            <th class="text-center" width=15%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($inactive as $student) { ?>
                                                            <tr>
                                                                <td class="text-center"><? echo $student['username'] ?></td>
                                                                <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                                <td class="text-center"><? echo $student['section_name'] ?></td>
                                                                <td class="text-center"><a href="<? echo base_url('/moderator/reactivateStudent/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Reactivate</a></td>
                                                            </tr>
    <? } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="InActiveStudentsPager" class="pager">
                                                <form class="form-inline">
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                        <span class="glyphicon glyphicon-backward  prev">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                    </div>
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-forward  next">  </span>
                                                        <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select class="pagesize form-control input-sm "  >
                                                            <option selected="selected"  value="10">10</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                            <option  value="40">40</option>
                                                        </select></div>
                                                </form>
                                            </div>
<? }else{ ?> 
                                         <? if (isset($activeMenuTab)) if ($activeMenuTab == 'inactiveStudents') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
<div class="col-md-12"><h3 class="text-center text-danger">NO INACTIVE STUDENTS AVAILABLE TO VIEW.</h3></div><? } ?>
                                    </div>
                                </div>
                                </div>
                            </div>
                         </div>
                        
                        <div class="tab-pane <? if (isset($activeMenu)) {if ($activeMenu == 'mySections') echo 'active' ;} ?> fade in" id="sections">
                        <div class="panel panel-primary">
                            <div class="panel-heading">My Section > <span id="tabNameSections">Active Sections</span></div>
                            <div class="panel-body">
                                <ul class="nav nav-tabs" id="myTablia">
                                    <li class="active text-center"><a href="#activeSections" data-toggle="tab" onclick='$("#tabNameSections").text("Active Sections");'>Active Sections <span class="badge"><? echo count($activeSections)?></span></a></li>
                                    <li class="text-center"><a href="#inactiveSections" data-toggle="tab" onclick='$("#tabNameSections").text("Inactive Sections");'>Inactive Sections <span class="badge"><? echo count($inactiveSections)?></span></a></li>
                                </ul>
                                <div id="itemContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="activeSections"  style="padding-top:2%">
                    <? if (isset($activeMenuTab)) if ($activeMenuTab == 'activeSections') { ?>
                                                <div class="col-md-12">
                                                    <div class="alert alert-success alert-dismissable">
                                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                                 <? echo $alert; ?>
                                                    </div>    
                                                </div>
                                                                <? } ?>
                                        <div class="row">
                                            <div class="col-md-4" >
                                              
                                                    <div class="well">
                                                <form method="post" action="<? echo base_url('moderator/addSection/'.$profile['user_id'].'')?>">
                                                <div class="form-group">
                                                    <label class="control-label">Section Name:</label>
                                                    <input onkeydown="return alphaValidator(event);" type="text" id="sectionName" name="sectionName" class="form-control input-sm" placeholder="Name" />
                                                </div>
                                                <div class="text-center">
                                                    <button onclick ="checkAddSection()"  class="btn btn-sm btn-primary" style="text-decoration: none">Add Section</button>
                                                </div>
                                                    </form>
                                                    </div>
                                                  
                                            </div>
                                            <div class="col-md-8">
                                                <?if (!empty($activeSections)){?>
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="actSection" placeholder="Search..">
                                                    </div>
                                                </div>
                                                <div class="table-responsive">
                                                <table id="ActiveSections" class="actSection table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=30%>Section Name</th>
                                                            <th class="text-center" width=30%>Number of Students</th>
                                                            <th class="text-center" width=20%></th>
                                                            <th class="text-center" width=15%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($activeSections as $sections) {foreach ($sections as $section){ ?>
                                                            <tr>
                                                                <td class="text-center activesectionnames"><? echo $section['section_name'] ?></td>
                                                                <td class="text-center"><? echo $section['number'] ?></td>
                                                                <td class="text-center"><button onclick="editSection(<? echo $section['section_id'].",'".$section['section_name']."'"?>)" class="btn btn-sm btn-warning" style="text-decoration: none">Edit Name</button></td>
                                                                <td class="text-center"><div class="tiptext" <?if($section['number']!=0)echo 'data-toggle="tooltip" data-placement="left" title="" data-original-title="You cant deactivate sections if there are students assigned."';?> ><button onClick="deactivatesectionConfirm(<?echo $section['section_id'] ?>);" class="btn btn-sm btn-danger" style="text-decoration: none" <?if($section['number']!=0)echo 'disabled';?>>Deactivate</button></div></td>
                                                            </tr>
                                                                <? }} ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                                <div id="ActiveSectionsPager" class="pager">
                                            <form class="form-inline">
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                    <span class="glyphicon glyphicon-backward  prev">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                </div>
                                                <div class="form-group">
                                                    <span class="glyphicon glyphicon-forward  next">  </span>
                                                    <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                </div>
                                                <div class="form-group">
                                                    <select class="pagesize form-control input-sm "  >
                                                        <option selected="selected"  value="10">10</option>
                                                        <option value="20">20</option>
                                                        <option value="30">30</option>
                                                        <option  value="40">40</option>
                                                    </select></div>
                                            </form>
                                        </div>
                                            <? }
else echo '<h3 class="text-center text-danger">NO SECTIONS AVAILABLE TO VIEW.</h3>' ?>
                                        </div>	
                                        </div>
                                        </div>
                                    
<div class="tab-pane fade in" id="inactiveSections"  style="padding-top:2%">
                                <? if (!empty($inactiveSections)) { ?>
    <div class="col-md-12">
                                                <div class="form-inline pull-right" style="margin-bottom:2%">
                                                    <div class="form-group">
                                                        <input type="search" class="form-control input-sm light-table-filter" data-table="inactSection" placeholder="Search..">
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="table-responsive">
                                                <table id="inActiveSections" class="inactSection table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                    <thead>
                                                        <tr>
                                                            <th class="text-center" width=50%>Section Name</th>
                                                            <th class="text-center" width=50%></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <? foreach ($inactiveSections as $section) { ?>
                                                            <tr>
                                                                <td class="text-center inactivesectionnames"><? echo $section['section_name'] ?></td>
                                                                <td class="text-center"><a href="<? echo base_url('/moderator/reactivateSection/' . $section['section_id'] . ''); ?>" class="btn btn-sm btn-warning" style="text-decoration: none">Reactivate</a></td>
                                                            </tr>
                                                                <? } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div id="InActiveSectionsPager" class="pager">
                                                <form class="form-inline">
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-fast-backward first">  </span>
                                                        <span class="glyphicon glyphicon-backward  prev">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text"  class="text-center pagedisplay form-control input-sm "/>
                                                    </div>
                                                    <div class="form-group">
                                                        <span class="glyphicon glyphicon-forward  next">  </span>
                                                        <span class="glyphicon glyphicon-fast-forward last">  </span>
                                                    </div>
                                                    <div class="form-group">
                                                        <select class="pagesize form-control input-sm "  >
                                                            <option selected="selected"  value="10">10</option>
                                                            <option value="20">20</option>
                                                            <option value="30">30</option>
                                                            <option  value="40">40</option>
                                                        </select></div>
                                                </form>
                                            </div>
<? }
else echo '<h3 class="text-center text-danger">NO INACTIVE SECTIONS AVAILABLE TO VIEW.</h3>' ?>
                                </div>
                                </div>
                                </div>
                            </div>
                         </div>
                        
                         <div class="tab-pane <? if (isset($activeMenu)) {
    if ($activeMenu == 'myProfile') echo 'active';
} ?> fade in" id="profile">
                        <div class="panel panel-primary">
                            <div class="panel-heading">My Profile</div>
                            <div class="panel-body">
<? if (isset($activeMenu)) if ($activeMenu == 'myProfile') { if (isset($error)) {?>
                                                                        <div class="col-md-12">
                                            <div class="alert alert-danger alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <? echo $error; ?>
                                            </div>    
                                        </div>
<?}else{ if(isset($alert)){?>
                                
                                        <div class="col-md-12">
                                            <div class="alert alert-success alert-dismissable">
                                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <? echo $alert; ?>
                                            </div>    
                                        </div>
<? } }}?>
                                <div class='col-md-4'>
                                    <img src="<? echo base_url('/assets/images/teacher.png') ?>" alt="Smiley face" height="100%" width="100%">
                                </div>
                                <div class='col-md-8'>
                                    <div class='row'>
                                        <div class='col-md-12'>
                                            <label>Username:</label> <? echo $profile['username']; ?>
                                        </div>
                                        <div class='col-md-12'>
                                            <label>First Name:</label> <? echo $profile['firstname']; ?>
                                        </div>
                                        <div class='col-md-12'>
                                            <label>Middle Name:</label> <? echo $profile['middlename']; ?>
                                        </div>
                                        <div class='col-md-12'>
                                            <label>Last Name:</label> <? echo $profile['lastname']; ?>
                                        </div>

                                        <div class='col-md-12  text-center'>
                                            <a href="<? echo base_url('moderator/edit/') ?>" class="btn btn-warning" style="">Edit</a>
                                            <button data-target='#changePass' data-toggle="modal"  class="btn btn-primary" style="">Change Password</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        </div>   
                        </div>
                       
                </div>
            </div>
                </div>

<div id="footer">
    <div class="container" >
        <p class="text-center" style="color:white;margin:19px;">My Reading Laboratory. Copyright <? echo date("Y"); ?> © </p>
    </div>
</div>

<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Deactivate</h4>
            </div>
            <div class="modal-body">
                Are you sure that you want to deactivate this user?
            </div>

            <div class="modal-footer">
                <a href="#" id="deleteLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="resetPass" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Reset Password</h4>
            </div>
            <div class="modal-body">
                Are you sure that you want to reset the password for this user?
            </div>

            <div class="modal-footer">
                <a href="#" id="resetLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="sectionError" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Error</h4>
            </div>
            <div class="modal-body">
                <span id="sectionErrorText"></span>
            </div>

            <div class="modal-footer">
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">OK</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="changePass" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Change Password</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="passwordError" style="display:none">
                    <div class="alert alert-danger">
                        <button type="button" class="close" onclick="document.getElementById('passwordError').style.display = 'none';" aria-hidden="true">&times;</button>
                        New password is not the same with the confirmation password.
                    </div>    
                </div>
                <form class="form-horizontal" id="changePassForm" method="post" action="<?php echo base_url('moderator/changePassword/' . $profile['user_id']); ?>">
                    <div class="form-group">
                        <label class="col-sm-5 control-label">Current Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="currentPass" name="currentPass" class="form-control input-sm" placeholder="Current Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">New Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="newPass" name="newPass" class="form-control input-sm" placeholder="New Password" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-5 control-label">Confirm Password:</label>
                        <div class="col-sm-5">
                            <input type="password" id="confirmPass" name="confirmPass" class="form-control input-sm" placeholder="Confirm Password" />
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button   onClick="changePass()" class="btn btn-primary btn-sm">Change Password</button>
                        <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deactivatesection" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="margin-left: 35%">
        <div class="modal-content" style="width:70%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Deactivate</h4>
            </div>
            <div class="modal-body">
                Are you sure that you want to deactivate this section?
            </div>

            <div class="modal-footer">
                <a href="#" id="deactiveSectionLink" class="btn btn-primary btn-sm" style="">YES</a>
                <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">CANCEL</button>
            </div> 

        </div>
    </div>
</div>

<div class="modal fade" id="editSection" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Edit Section</h4>
            </div>
            <div class="modal-body">
                <div class="col-md-12" id="secError" style="display:none">
                    <div class="alert alert-danger">
                        <button type="button" class="close" onclick="document.getElementById('secError').style.display = 'none';" aria-hidden="true">&times;</button>
                       <span id="secErrorText"></span>
                    </div>    
                </div>
                <form class="form-horizontal" id="changeSectionForm" method="post" action="#">
                    <div class="form-group">
                        <label class="col-sm-5 control-label">Section name:</label>
                        <div class="col-sm-5">
                            <input onkeydown="return alphaValidator(event);" type="text" id="section_name" name="secName" class="form-control input-sm" placeholder="Name.." />
                        </div>
                    </div>
                    
                    <div class="modal-footer">
                        <button id="updateSectionLink" class="btn btn-primary btn-sm">Update</button>
                        <button  type="button" class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    </div> 
                </form>
            </div>
        </div>
    </div>
</div>

<?if(!empty($pie)){
    foreach($pie as $chart){
        $counter = 0;
    while($counter<13){?>
<? if (isset($chart['level_'.$counter])) {?>
<div class="modal fade" id="<?echo str_replace(array(' ','.', ','), '',$chart['section_name'].'_level_'.$counter)?>" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top: 5%">
    <div class="modal-dialog" style="margin-left: 35%;">
        <div class="modal-content" style="width:80%">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Evaluation</h4>
            </div>
            <div class="modal-body" style="padding:0">
                    <div class="table-responsive">
                                            <table id="StudentReport" class="stdnReport table table-striped tablesorter table-bordered table-condensed" style="padding-top:2%;">
                                                <thead>
                                                    <tr>
                                                        <th class="text-center" width=30%>Student Name</th>
                                                        <th class="text-center" width=15%></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                    <? foreach ($myStudents as $student) { if ($student['level_number']==$counter && str_replace(array(' ','.', ','), '',$chart['section_name'])==str_replace(array(' ','.', ','), '',$student['section_name'])){?>
                                                    
                                                        <tr>
                                                            <td class="text-center"><? echo $student['firstname'] . ' ' . $student['lastname'] ?></td>
                                                            <td class="text-center"><button data-toggle="modal" data-target='#studentProgress_<? echo $student['user_id'] ?>'  href="<? echo base_url('/student/studentReport/' . $student['user_id'] . ''); ?>" class="btn btn-sm btn-success" style="text-decoration: none">View Progress</button></td>
                                                        </tr>
                                            <? }} ?>
                                                </tbody>
                                            </table>
                                        </div>
            </div>
            <div class="modal-footer">
                        <button  type="button" class="btn btn-primary btn-sm" data-dismiss="modal" aria-hidden="true">OK</button>
            </div> 
        </div>
    </div>
</div>

<?}$counter++;}}}?>
<? if(!empty($myStudents))
foreach ($myStudents as $student)
    echo '<div class="modal fade" id="studentProgress_' . $student['user_id'] . '" tabindex="-1" role="dialog" aria-hidden="true"></div>'
    ?>
<script>
    function checkEditSection(section_name){
        var oldName = section_name.toLowerCase().trim();
        var newName = document.getElementById('section_name').value.toLowerCase().trim();;
        
        if(oldName == newName){
            return;
        }
        
        if(newName===''){
            $("#secErrorText").text("Section name cannot be empty.");
             document.getElementById('secError').style.display = '';
            event.preventDefault();
                                  return;
                              }
                              
       $('#ActiveSections .activesectionnames').each(function(){
        if(newName === $(this).html().toLowerCase()){
               event.preventDefault();
                    $("#secErrorText").text("That section name is already being. Please select another one.");
             document.getElementById('secError').style.display = '';
                                  return;
                                }
});
$('#inActiveSections .inactivesectionnames').each(function(){
        if(newName === $(this).html().toLowerCase()){
              event.preventDefault();
                    $("#secErrorText").text("That section name is already being used by the moderator. Please select another one.");
             document.getElementById('secError').style.display = '';
                                  return;
                                }
});
    }
    function editSection(sec_id,section_name){
    document.getElementById('secError').style.display = 'none';
        event.preventDefault();
                                    $('#editSection').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    document.getElementById('section_name').value=section_name ; 
                                    $("#changeSectionForm").attr("action", "<? echo base_url('moderator/updateSection/') ?>/" + sec_id);
                                    $("#updateSectionLink").attr("onclick","checkEditSection('"+section_name+"')");
                                }
                                
    function checkAddSection(){
        var section_name =  document.getElementById('sectionName').value.toLowerCase().trim();
        if(section_name==''){
            event.preventDefault();
            $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                          return '10' + '%';
                                      }
                                  });
                                  $("#sectionErrorText").text("Section name cannot be empty.");
                                  return;
                              }
        $('#ActiveSections .activesectionnames').each(function(){
        if(section_name === $(this).html().toLowerCase()){
                event.preventDefault();
                                    $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                     $("#sectionErrorText").text("Name provided is already in use. Please select another one.");
                                    return;
                                }
});
$('#inActiveSections .inactivesectionnames').each(function(){
        if(section_name === $(this).html().toLowerCase()){
                event.preventDefault();
                                    $('#sectionError').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                     $("#sectionErrorText").text("Name provided is already in use. Please select another one");
                                    return;
                                }
});
    }
                                    function changePass() {
                                    var newPassText = document.getElementById('newPass').value;
                                    var confirmPassText = document.getElementById('confirmPass').value;

                                    if ( newPassText != confirmPassText || newPassText == '' || confirmPassText == '') {
                                        document.getElementById('passwordError').style.display = '';
                                        event.preventDefault();
                                    }
                                }

                                function deleteConfirm(id) {
                                    event.preventDefault();
                                    $('#delete').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    $("#deleteLink").attr("href", "<? echo base_url('moderator/deactivateStudent/') ?>/" + id);
                                }
                                
                                 function deactivatesectionConfirm(id) {
                                    event.preventDefault();
                                    $('#deactivatesection').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    $("#deactiveSectionLink").attr("href", "<? echo base_url('moderator/deactivateSection/') ?>/" + id);
                                }

                                function resetPassword(id) {
                                    event.preventDefault();
                                    $('#resetPass').modal({}).css({
                                        'padding-top': function() {
                                            return '10' + '%';
                                        }
                                    });
                                    $("#resetLink").attr("href", "<? echo base_url('moderator/resetPassword/') ?>/" + id);
                                }

                                function showitem(id) {
                                    $("#chart_" + id).show().siblings('[id^="chart"]').hide();

                                }
</script>
